<template>
  <div class="struc">
    <head-nav-bar class="header" title="动态"></head-nav-bar>
    <div class="main" v-scroll.top>
      <div class="main-scroll">
        <!-- 直接使用struc组件，IOS会存在PullRefresh组件无效问题 -->
        <van-pull-refresh class="refresh" v-model="isLoading" @refresh="onRefresh">
          <div class="tags">
            <div class="wrap">
              <ul>
                <template v-for="(tag,index) in tags">
                  <li
                    :class="{tag:true, active: tag_index===index}"
                    :key="index"
                    @click="selectTag(index)"
                  >
                    <div class="name">{{tag.tag_name}}</div>
                    <div class="line"></div>
                  </li>
                </template>
              </ul>
            </div>
          </div>

          <p class="count">刷新次数: <span>{{ count }}</span></p>
          <div class="list">
            <div v-for="num in count">{{num}}</div>
          </div>
        </van-pull-refresh>
      </div>
    </div>
    <foot-nav class="footer" :navIndex="1" />
  </div>
</template>
<script>
  // 这里引入组件只是为了演示，正式项目请在 main.js 中引入
  import Vue from 'vue'
  import { PullRefresh } from 'vant'
  Vue.use(PullRefresh)
  // 这里引入组件只是为了演示，正式项目请在 main.js 中引入

  export default {
    name: 'dynamic',
    data() {
      return {
        tags: [
          {
            id: 0,
            tag_name: '大兄弟'
          },{
            id: 0,
            tag_name: '你想要上天不'
          },{
            id: 0,
            tag_name: '老铁666'
          },{
            id: 0,
            tag_name: '今日头条'
          },{
            id: 0,
            tag_name: '98k'
          },{
            id: 0,
            tag_name: '大吉大利'
          },{
            id: 0,
            tag_name: '晚上吃鸡'
          },{
            id: 0,
            tag_name: '这波操作'
          },{
            id: 0,
            tag_name: '有点意思'
          },{
            id: 0,
            tag_name: 'nice'
          },{
            id: 0,
            tag_name: 'ig牛'
          },{
            id: 0,
            tag_name: '大兄弟'
          },{
            id: 0,
            tag_name: '你想要上天不'
          },{
            id: 0,
            tag_name: '老铁666'
          },{
            id: 0,
            tag_name: '今日头条'
          },{
            id: 0,
            tag_name: '98k'
          },{
            id: 0,
            tag_name: '大吉大利'
          },{
            id: 0,
            tag_name: '晚上吃鸡'
          },{
            id: 0,
            tag_name: '这波操作'
          },{
            id: 0,
            tag_name: '有点意思'
          },{
            id: 0,
            tag_name: 'nice'
          },{
            id: 0,
            tag_name: 'ig牛'
          },{
            id: 0,
            tag_name: '大兄弟'
          },{
            id: 0,
            tag_name: '你想要上天不'
          },{
            id: 0,
            tag_name: '老铁666'
          },{
            id: 0,
            tag_name: '今日头条'
          },{
            id: 0,
            tag_name: '98k'
          },{
            id: 0,
            tag_name: '大吉大利'
          }
        ],
        tag_index: 0,
        count: 1,
        isLoading: false
      }
    },
    methods: {
      selectTag(index) {
        this.tag_index = index
      },
      onRefresh() {
        setTimeout(() => {
          this.isLoading = false;
          this.count++;
        }, 500);
      }
    }
  }
</script>
<style lang="scss" scoped>
  .refresh {
    min-height: 100%;
    span {
      color: #f00;
    }
  }

  .tags {
    width: 375px;
    height: 46px;
    background-color: #fff;
    border-bottom: 1px solid rgb(226, 222, 222);
    overflow-y: hidden;
    .wrap {
      width: 100%;
      height: 100px;
      overflow-x: scroll;
      overflow-y: hidden;
      ul {
        height: 46px;
        /*padding: 0 3px;*/
        white-space: nowrap;
      }
      li.tag {
        display: inline-block;
        height: 46px;
        padding: 0 20px;
        .name {
          height: 42px;
          font-size: 13px;
          line-height: 46px;
          text-align: center;
        }
        .line {
          width: 25px;
          height: .04rem;
          margin: 0 auto;
          border-radius: .02rem;
          background-color: transparent;
          overflow: hidden;
        }
      }
      li.active {
        .name {
          color: #da1520;
        }
        .line {
          background-color: #da1520;
        }
      }
    }
  }

  .count {
    line-height: 30px;
    text-align: center;
  }

  .list {
    div {
      margin: 10px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 200px;
    }
  }
</style>
